<template>
	<div class="container">
		<a-row class="home_page">
			<a href="#"><a-icon type="double-left" />返回首页</a>
	    </a-row>
		<div class="Personal_tab">
			<p style="text-align: center; padding: 20px 0 10px 0; margin: 0 auto; width: 80%;">个人认证
				<a-divider />
			</p>
			<a-form :form="form" style="width: 80%; margin: 0 auto;" @submit="handleSubmit">
				<a-form-item v-bind="formItemLayout" label="注册类型">
					<a-select v-decorator="[
			          'registrationtype',
			          {rules: [{ required: true, message: '请选择!' }]}
			        ]" placeholder="请选择">
						<a-select-option value="n">
							简单注册
						</a-select-option>
						<a-select-option value="y">
							普通注册
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="企业类型">
					<a-select v-decorator="[
			          'enterprisetype',
			          {rules: [{ required: true, message: '请选择!' }]}
			        ]" placeholder="请选择">
						<a-select-option value="n">
							境内企业
						</a-select-option>
						<a-select-option value="y">
							境外企业
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="企业名称" >
					<a-input v-decorator="[ 'enterprisename', { rules: [ {required: true, message: '企业名称不能为空！',}]}]" />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="统一社会信用代码" >
					<a-input v-decorator="[ 'creditcode', { rules: [ {required: true, message: '统一社会信用代码不能为空！',}]}]" />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="企业成立时间" >
					<a-input v-decorator="[ 'time', { rules: [ {required: true, message: '企业成立时间不能为空！',}]}]" />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="法定代表人姓名" >
					<a-input v-decorator="[ 'legalperson', { rules: [ {required: true, message: '法定代表人姓名不能为空！',}]}]" />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="企业注册地址" >
					<a-input v-decorator="[ 'address', { rules: [ {required: true, message: '企业注册地址不能为空！',}]}]" />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="营业执照扫描件">
					<a-button >
						上传
					</a-button>
					请上传正确的证件扫描件正面，否则影响后期业务办理(.jpg|.jpeg|.gif|.png|.pdf)
				</a-form-item>
				<a-divider />
				<a-form-item v-bind="formItemLayout" label="登录名" extra="长度为6-16个字符，支持字母数字和@符号组成，不能使用空格。">
					<a-input v-decorator="[ 'loginname', { rules: [ {required: true, message: '登录名不能为空！',}]}]" />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="密码">
					<a-input v-decorator="['password', { rules: [{required: true, message: '密码不能为空!',}, {validator: validateToNextPassword,}],} ]" type="password" />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="确认密码">
					<a-input v-decorator="['confirm',{rules: [{required: true, message: '确认密码不能为空!',}, {validator: compareToFirstPassword,}],}]" type="password" @blur="handleConfirmBlur" />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="电子邮箱" >
				      <a-input
				        v-decorator="[
				          'email',
				          {
				            rules: [{
				              type: 'email', message: '输入的电子邮件无效!',
				            }, {
				              required: true, message: '请输入您的电子邮箱!',
				            }]
				          }
				        ]"
				      />
    			</a-form-item>
				<a-form-item v-bind="formItemLayout" label="真实姓名">
					<a-input v-decorator="[
			          'nickname',
			          {
			            rules: [{ required: true, message: '请输入您的真实姓名!', whitespace: true }]
			          }
			        ]" />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="手机号码">
					<a-input v-decorator="[
					          'phone',
					          {
					            rules: [{ required: true, message: '请输入您的手机号码!' }],
					          }
					        ]" style="width: 100%">
					</a-input>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="验证码" >
					<a-row :gutter="8">
						<a-col :span="12">
							<a-input v-decorator="[
				              'imgcaptcha',
				              {rules: [{ required: true, message: '请输入验证码!' }]}
				            ]" />
						</a-col>
						<a-col :span="12">
							<a-button>图片验证</a-button>
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="短信验证码" >
					<a-row :gutter="8">
						<a-col :span="12">
							<a-input v-decorator="[
				              'captcha',
				              {rules: [{ required: true, message: '请输入你的验证码!' }]}
				            ]" />
						</a-col>
						<a-col :span="12">
							<a-button>获取验证码</a-button>
						</a-col>
					</a-row>
				</a-form-item>
				<a-divider />
				<a-form-item v-bind="tailFormItemLayout">
					<a-checkbox v-decorator="['agreement', {valuePropName: 'checked'}]">
						本人保证: 以上填写内容和材料附件真实无误，若填写或提供任何错误、不实或不完整的资料导致发生任何经济及法律纠纷，本人愿承担一切责任！
					</a-checkbox>
				</a-form-item>
				<a-form-item v-bind="tailFormItemLayout">
					<a-button type="primary" html-type="submit" block>
						认证
					</a-button>
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				confirmDirty: false,
				residences: [],
				autoCompleteResult: [],
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 8	
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 10
						},
					},
				},
				tailFormItemLayout: {
					wrapperCol: {
						xs: {
							span: 24,
							offset: 16,
						},
						sm: {
							span: 16,
							offset: 6,
						},
					},
				},
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {},
		components: {
			// Footer
		},
		watch: {},

		mounted: function() {

		},
		methods: {
			//认证提交
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						console.log('Received values of form: ', values);
					}
				});
			},
			//检测确认密码
			handleConfirmBlur(e) {
				const value = e.target.value;
				this.confirmDirty = this.confirmDirty || !!value;
			},
			//检测确认密码
			compareToFirstPassword(rule, value, callback) {
				const form = this.form;
				if(value && value !== form.getFieldValue('password')) {
					callback('您输入的两个密码不一致!');
				} else {
					callback();
				}
			},
			//检测密码		
			validateToNextPassword(rule, value, callback) {
				const form = this.form;
				if(value && this.confirmDirty) {
					form.validateFields(['confirm'], {
						force: true
					});
				}
				callback();
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 1180px;
		height: 100%;
		.home_page{
			padding: 10px;
		}
		.Personal_tab {
			width: 100%;
			height: 100%;
			background: #fff;
			border: 1px solid #eee;
			padding: 10px;
		}
	}
</style>